<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>案例详情页</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        li {
            list-style: none;
        }
        
        a {
            text-decoration: none;
        }
        
        img {
            vertical-align: middle;
        }
        
        header {
            width: 100%;
            height: 48px;
            display: flex;
            flex-direction: column;
            position: relative;
        }
        
        #top {
            width: 100%;
            height: 48px;
            background-color: #323232;
        }
        
        #top #top-con {
            width: 1100px;
            margin: auto;
            line-height: 48px;
            display: flex;
            justify-content: space-between;
        }
        
        #top-con ul {
            display: flex;
        }
        
        #top-con ul li {
            width: 88px;
            height: 48px;
            text-align: center;
        }
        
        #top-con ul li a {
            font-size: 14px;
            color: #a6a6a6;
        }
        
        #top-con ul li a:hover {
            color: #dd4012;
        }
        
        #top-con ul li a:hover {
            color: #fff;
        }
        
        #top-con ul li:hover {
            background-color: #dd4012;
        }
        
        #top-con ul .point {
            background-color: #dd4012;
        }
        
        #top-con ul .point a {
            color: #fff;
        }
        
        #top-con #contact {
            display: flex;
            height: 48px;
            align-items: center;
        }
        
        #contact img {
            width: 18px;
            height: 18px;
            /* display: block; */
            margin-right: 17px;
            /* margin-top: 8px; */
            cursor: pointer;
        }
        
        #contact p {
            /* line-height: 36px; */
            font-size: 10px;
            color: #505050;
            margin-right: 24px;
        }
        
        #logo {
            width: 183px;
            height: 48px;
            position: relative;
        }
        
        #logo #logo-con {
            position: absolute;
            top: 0;
            left: 0;
        }
        
        main {
            width: 100%;
            height: 1783px;
            background-color: #f0f1f1;
            box-sizing: border-box;
            padding-top: 106px;
        }
        
        .main-con {
            width: 1100px;
            height: 1636px;
            background-color: #fff;
            margin: auto;
            box-sizing: border-box;
            padding-top: 60px;
            padding-left: 55px;
            padding-right: 55px;
            color: #333333;
        }
        
        .main-con p {
            font-size: 12px;
            width: 990px;
            height: 69px;
            background-color: #f0f1f1;
            box-sizing: border-box;
            padding-top: 18px;
            padding-left: 22px;
            margin-top: 25px;
            margin-bottom: 26px;
        }
        
        .main-con h6 {
            color: #7d7d7d;
            line-height: 26px;
        }
        
        .main-con h5 {
            font-size: 14px;
        }
        
        .main-con h5:nth-of-type(1) {
            margin-top: 28px;
        }
        
        .main-con .bj {
            margin-top: 10px;
            margin-bottom: 28px;
        }
        
        .main-con .platform {
            margin-top: 16px;
            margin-bottom: 20px;
            font-size: 14px;
        }
        
        .main-con .time {
            margin-top: 18px;
            margin-bottom: 18px;
            font-size: 14px;
        }
        
        .main-con .case {
            margin-top: 18px;
            margin-bottom: 20px;
            font-size: 14px;
        }
        
        .main-con .result {
            box-sizing: border-box;
            margin-top: 22px;
            padding-bottom: 47px;
            font-size: 14px;
            border-bottom: 1px solid #e3e3e3;
        }
        
        .main-con .bot {
            display: flex;
            justify-content: space-between;
            margin-top: 20px;
            box-sizing: border-box;
            padding: 0 5px;
        }
        
        .main-con .prev,
        .main-con .next {
            font-size: 13px;
            color: #999999;
        }
        
        .main-con .prev span,
        .main-con .next span {
            color: #484848;
        }
        
        footer {
            height: 82px;
            width: 100%;
            background-color: #323232;
        }
        
        #footer-con {
            width: 1100px;
            margin: auto;
            /* line-height: 82px; */
        }
        
        #about {
            float: right;
        }
        
        #about ul {
            display: flex;
            justify-content: flex-end;
            font-size: 12px;
            color: #999999;
            margin-top: 27px;
            overflow: hidden;
            text-align: right;
        }
        
        #about ul li {
            margin-right: 19px;
        }
        
        #about ul li:last-of-type {
            margin-right: 0;
        }
        
        #about p {
            font-size: 8px;
            color: #666666;
            margin-top: 8px;
            text-align: right;
        }
        
        #template {
            display: none;
        }
    </style>
</head>

<body>
    <header>
        <div id="top">
            <div id="top-con">
                <div id="logo">
                    <div id="logo-con">
                        <img src="img/logo.png" alt="">
                    </div>
                </div>
                <ul>
                    <li>
                        <a href="/index.html" target="_blank">网站首页</a>
                    </li>
                    <li>
                        <a href="#">传悦资源</a>
                    </li>
                    <li class="point">
                        <a href="/case">传悦案例</a>
                    </li>
                    <li>
                        <a href="/project">解决方案</a>
                    </li>
                    <li>
                        <a href="#">需求提交</a>
                    </li>
                </ul>
                <div id="contact">
                    <img src="img/phone.png" alt="">
                    <p>0535-60652189</p>
                    <img src="img/bQQ.png" alt="">
                    <img src="img/bweibo.png" alt="">
                    <img src="img/bweixin.png" alt="">
                    <img src="img/bEmail.png" alt="">
                </div>
            </div>
        </div>
    </header>

    <main>

        <div class="main-con">
            <% caseDetail.forEach(function(item){ %>

                <%- item.content %>

                    <% }) %>
                        <!-- <h1>AERMOST极尚&nbsp;网站设计</h1>
            <p>北纬三十七度红酒网是由中国国际葡萄酒网、中国国际商会山东商会葡萄酒分会及烟台市葡萄与葡萄酒局三家单位唯一官方授权的电子商务平台，也是张裕、长城葡萄酒有限公司官方授权的网络销售公司。</p>
            <img src="img/c1.png" alt="">
            <h5>项目背景</h5>
            <h6 class="bj">正邦为北京银行提供了众多服务，品牌咨询、标志VI设计、视频制作、物料设计等。正邦邦传媒广告还负责了北京银行“财富1+1”和“小巨人”金融服务品牌的品牌亮相和创意执行，策划并设计了品牌发布广告和活动形象宣传品。</h6>
            <h5>运营平台</h5>
            <h6 class="platform">新浪（230W）、腾讯（106W）、人人（130W）</h6>
            <h5>运营时间</h5>
            <h6 class="time">2013年3月1日-至今</h6>
            <h5>解决方案</h5>
            <h6 class="case">北京银行“财富1+1”公司金融服务品牌发布会<br>北京银行作为全国第六家推出公司金融服务品牌的银行，公司一直致力打造优势领域。“财富1＋1”公司金融服务品牌就是秉承“相知相伴、共创未来”的服务理念、传承以往优势、全面整合现有专业资源而形成的。<br>发布会创意点：创意灵感来自于正邦为此金融产品设计了一个有特色且生动的型logo，我们用冰雕做了一个可容纳液体的容器，现场有请相关嘉宾与领导参与注 入分别代表客户的红色液体与代表公司金融业务的金色液体，形成美丽的蝴蝶LOGO造型，阐释了“财富1+1”的品牌理念，将品牌形象深刻传达给现场的每一位来宾。<br>北京银行“小巨人”金融产品发布会<br>本次活动是北京银行“财富1+1”公司金融服务品牌发布会的延伸，通过以中国能效融资项目贷款、小额担保贷款、“融信宝”信用贷款、文化创意产业贷款这四类中小企业特色金融产品为重点宣传“小巨人”中小企业成长融资方案，将北京银行“公司金融品牌服务”的推广做深做实。<br>发布会创意点：为了将金融产品“小巨人”的形象延展并生动化，我们策划制作了讲述小巨人成长的Flash作为开场，伴随着flash，“小巨人”大型充气玩偶渐渐
                充气长大，将人们的关注点集中在这个“小巨人”身上，使品牌深入人心。现场银行领导对产品的详细阐述使得形象与理论完美结合，意义深刻。
            </h6>
            <h5>传悦成果</h5>
            <h6 class="result">1.活动带来大量阅读、评论和转发，曝光量大幅提高，活动以其轻松简单的风格获得了网友的喜爱，互动性得到了很好的提升。<br>2.高效舆情监控，快速响应和高质量、高频率报告，屡次获得认可。<br>3.创意稿件频出。全手绘图片或视频，用轻松、幽默的风格将产品拟人化，拉近与粉丝的距离。及时与热点结合，提高了稿件的阅读量与产品的曝光率。<br>4.网友互动。有倾向性地引导聊天内容，主动为粉丝提供相关手机参数与配置信息，让粉丝更全面、更准确、更快的地掌握。<br>5.关键词主动搜索微博用户，并与其聊天互动，为其解决问题并推荐产品，增加粉丝对三星产品的好感度与美誉度，促进粉丝转换为用户。<br>6.借势传播。借力热门事件，吸引网友关注三星的主推产品和主要业务，并斟酌选择对象与时机，以及借力的方式，四两拨千斤。</h6>

            <div class="bot">
                <h6 class="prev">上一个：<span>开门红商城基础营销</span></h6>

                <h6 class="next">下一个：<span>金数据全网整合营销</span></h6>
            </div> -->
        </div>
    </main>
    <!-- <div class="main-con" id="template">
        <h1></h1>
        <p></p>
        <img src="" alt="">
        <h5>项目背景</h5>
        <h6 class="bj"></h6>
        <h5>运营平台</h5>
        <h6 class="platform"></h6>
        <h5>运营时间</h5>
        <h6 class="time"></h6>
        <h5>解决方案</h5>
        <h6 class="case"></h6>
        <h5>传悦成果</h5>
        <h6 class="result"></h6>

        <div class="bot">
            <h6 class="prev">上一个：<span>开门红商城基础营销</span></h6>

            <h6 class="next">下一个：<span>金数据全网整合营销</span></h6>
        </div>
    </div> -->

    <footer>
        <div id="footer-con">
            <img src="img/bottom_logo.png" alt="">
            <div id="about">
                <ul>
                    <li>关于传悦</li>
                    <li>新闻动态</li>
                    <li>传悦观点</li>
                    <li>联系传悦</li>
                    <li>加入传悦</li>
                    <li>付款账户</li>
                </ul>
                <p>Copyright&nbsp;&copy;2013&nbsp;&nbsp;创梦网络科技有限责任公司&nbsp;&nbsp;&nbsp;||&nbsp;&nbsp;&nbsp;传悦&nbsp;&nbsp;Chnyoo.cn&nbsp;All&nbsp;Rights&nbsp;Reserved&nbsp;&nbsp;京ICP备12005221号</p>
            </div>
        </div>
    </footer>
</body>

</html>

<script>
    //模板
    let template = document.querySelector("#template");
    //中间部分main
    let div = document.querySelector("main");

    // div.innerHTML = "";


    //所有main里的内容
    // let http = new XMLHttpRequest();
    // http.open("get", "http://10.35.164.244:8080/cdetail");
    // http.send();
    // http.onreadystatechange = function() {
    //     if (http.readyState === 4) {
    //         let o = JSON.parse(http.responseText);
    //         // console.log(o);

    //         o.forEach(function(item) {
    //             let newCon = template.cloneNode(true);
    //             newCon.id = "";
    //             div.appendChild(newLi);
    //             newCon.querySelector("h1").innerHTML = item.title;
    //             newCon.querySelector("p").innerHTML = item.word;
    //             newCon.querySelector("img").setAttribute("src", item.img);
    //             newCon.querySelector(".bj").innerHTML = item.bj;
    //             newCon.querySelector(".platform").innerHTML = item.plat;
    //             newCon.querySelector(".time").innerHTML = item.time;
    //             newCon.querySelector(".case").innerHTML = item.case;
    //             newCon.querySelector(".result").innerHTML = item.result;
    //         })
    //     }
    // }
</script>